<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <div style="margin-bottom: 16px; color: brown;">UID/邀请码: {{ uid }}</div>
      <div style="margin-bottom: 16px">总共激活账号数量: {{ activeCount }}</div>
      <el-link href="https://t.me/+xiB_3qee-GxhZTE5" target="_blank" type="danger" style="margin-bottom: 16px">点我加群即可获赠10个账号的免费激活码</el-link>
      <div>
        <el-button @click="onActiveTap">激活</el-button>
      </div>
    </div>
    <el-table v-loading="isLoading" :data="activeList" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="Index" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column prop="account" label="激活账号数量">
      </el-table-column>
      <el-table-column prop="time" label="激活时间">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getUid, } from '@/utils';

export default {
  data() {
    return {
      isLoading: false,
      uid: getUid()
    }
  },
  created() {
    this.$store.dispatch("user/loadActives")
  },
  computed: {
    activeList() {
      const activeList = this.$store.state.user.activeList;
      return activeList;
    },
    activeCount() {
      let count = 0
      for (let index = 0; index < (this.activeList || []).length; index++) {
        const ac = this.activeList[index];
        count = count + parseInt(ac.account)
      }
      return count + 5
    }
  },
  methods: {
    onActiveTap() {
      this.$prompt("激活码", '请输入激活码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$store.dispatch("user/addActive", value)
      }).catch(() => {
      });
    },
    onFindActiveTap() {
      // shell.openExternal("https://www.baidu.com") // 使用 openExternal 方法打开链接
    }
  }
}
</script>